<!--
 * @Author: Southern Wind
 * @Date: 2024-11-21 14:41:01
 * @FilePath: \vue-scroll\src\components\home.vue
 * @Description:
-->

<script setup lang="ts">
import { ref } from 'vue';
import useVirtualList from './useVirtualList';

interface TableDataItem {
  id: number;
  name: string;
  address: string;
}

const tableData = ref<TableDataItem[]>([
  { id: 1, name: 'Item 1',  address: 'No. 189, Grove St, Los Angeles', },
  { id: 2, name: 'Item 2',  address: 'No. 189, Grove St, Los Angeles', },
  { id: 3, name: 'Item 3',  address: 'No. 189, Grove St, Los Angeles', },
  { id: 4, name: 'Item 4',  address: 'No. 189, Grove St, Los Angeles', },
  { id: 5, name: 'Item 5',  address: 'No. 189, Grove St, Los Angeles', },
  { id: 6, name: 'Item 6',  address: 'No. 189, Grove St, Los Angeles', },
  { id: 7, name: 'Item 7',  address: 'No. 189, Grove St, Los Angeles', },
  { id: 8, name: 'Item 8',  address: 'No. 189, Grove St, Los Angeles', },
  { id: 9, name: 'Item 9',  address: 'No. 189, Grove St, Los Angeles', },
  { id: 10, name: 'Item 10', address: 'No. 189, Grove St, Los Angeles' },
  { id: 11, name: 'Item 11', address: 'No. 189, Grove St, Los Angeles' },
  { id: 12, name: 'Item 12', address: 'No. 189, Grove St, Los Angeles' },
  { id: 13, name: 'Item 13', address: 'No. 189, Grove St, Los Angeles' },
  { id: 14, name: 'Item 14', address: 'No. 189, Grove St, Los Angeles' },
  { id: 15, name: 'Item 15', address: 'No. 189, Grove St, Los Angeles' },
  { id: 16, name: 'Item 16', address: 'No. 189, Grove St, Los Angeles' },
  { id: 17, name: 'Item 17', address: 'No. 189, Grove St, Los Angeles' },
  { id: 18, name: 'Item 18', address: 'No. 189, Grove St, Los Angeles' },
  { id: 19, name: 'Item 19', address: 'No. 189, Grove St, Los Angeles' },
  { id: 20, name: 'Item 20', address: 'No. 189, Grove St, Los Angeles' },
  { id: 21, name: 'Item 21', address: 'No. 189, Grove St, Los Angeles' },
  { id: 22, name: 'Item 22', address: 'No. 189, Grove St, Los Angeles' },
  { id: 23, name: 'Item 23', address: 'No. 189, Grove St, Los Angeles' },
  { id: 24, name: 'Item 24', address: 'No. 189, Grove St, Los Angeles' },
  { id: 25, name: 'Item 25', address: 'No. 189, Grove St, Los Angeles' },
  { id: 26, name: 'Item 26', address: 'No. 189, Grove St, Los Angeles' },
  { id: 27, name: 'Item 27', address: 'No. 189, Grove St, Los Angeles' },
  { id: 28, name: 'Item 28', address: 'No. 189, Grove St, Los Angeles' },
]);


const { actualRenderData } = useVirtualList({
  data: tableData,           // 列表项数据
  itemHeight: 40,                  // 每项的固定高度
  size: 10,                         // 渲染的列表项数目
  scrollContainer: ".scroll-container", // 滚动容器
  actualHeightContainer: ".actual-height-container", // 渲染实际高度的容器
  tranlateContainer: ".tranlate-container"   // 需要偏移的目标元素
});
</script>

<template>
  <ul class="scroll-container">
    <div class="actual-height-container">
      <div class="tranlate-container">
        <li v-for="(item, i) in actualRenderData">
          {{ item.name }}
        </li>
      </div>
    </div>
  </ul>

</template>

<style scoped>
*{margin: 0;padding: 0;}
body{
  overflow: hidden;
}
ul{
  list-style: none;

}
.scroll-container {
  height: 300px;
  overflow-y: auto;
}

.actual-height-container {
  position: relative;
  /* 根据需要设置宽度 */
}

.tranlate-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.tranlate-container li{
  height: 40px;
  line-height: 40px;
  text-align: center;
}
</style>
